<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Click on bicycles in these images</title>

</head>
<body>

<script src="processing-1.3.6.min.js"></script>
<script type="application/processing" data-processing-target="example1">

PImage bigImage;
float[] bx = new float[10];
float[] by = new float[10];
int bs = 4;
boolean[] bover = new boolean[10];
boolean[] locked = new boolean[10];
for (int i=0; i<10; i++){
	bover[i] = false;
	locked[i] = false;	
}
float[] bdifx = new float[10]; 
float[] bdify = new float[10]; 
for (int i=0; i<10; i++){
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
}

void setup() 
{

  bigImage = requestImage(jsImage1);
  size(352, 240);

  for (int i=0; i<10; i++) { 
  	bx[i] = 0.0;
  	by[i] = 0.0;
  }
  ellipseMode(CENTER_RADIUS);  
}

void updateSelf() 
{
	for (int i=0; i<10; i++) {
		bx[i] = jsx1[i];
		by[i] = jsy1[i];
	}
}

void removePoint(int idx) 
{
	bx[idx] = 0.0;
	by[idx] = 0.0;
	//bdifx[idx] = 0.0;
	//bdify[idx] = 0.0;
	free1[idx] = 1;
	jsx1[idx] = 0;
	jsy1[idx] = 0;
	bover[idx] = false;
}

void draw() 
{ 
  //updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  
  // Test if the cursor is over any ellipse
  for (int i=0; i<10; i++) {
	  if (free1[i] == 0) {
		  if (mouseX > bx[i]-bs && mouseX < bx[i]+bs && 
			  mouseY > by[i]-bs && mouseY < by[i]+bs) {
			bover[i] = true;  
			if(!locked[i]) { 
			  stroke(0); 
			  //colorMode(RGB,255);
			  fill(255 - i*20,i*100%255,i*30%255);
			} 
		  } else {
			stroke(255);
			//colorMode(RGB,255);
			fill(255 - i*20,i*100%255,i*30%255);
			bover[i] = false;
		  }
		  
		  // drawing our shapes
		  ellipse(bx[i], by[i], bs, bs);
	  }

  }

}

void mousePressed() {
  boolean new_point = true;
  for (int i=0; i<10; i++) {
	  if(bover[i]) { 
	  	new_point = false;
	  	if (mouseButton == LEFT) {
			locked[i] = true;
			fill(255 - i*20,i*100%255,i*30%255);
		}
		else {
			removePoint(i);
		}
	  } else {
		locked[i] = false;
	  }
	
	  bdifx[i] = mouseX-bx[i]; 
	  bdify[i] = mouseY-by[i];
  }
  if (new_point == true && mouseButton == LEFT) {
  	idx = getFreeIdx();
	bx[idx] = mouseX;
	by[idx] = mouseY;
	free1[idx] = 0;
  }
}



void mouseDragged() {
  for (int i=0; i<10; i++) {
	  if(locked[i]) {
		bx[i] = mouseX-bdifx[i]; 
		by[i] = mouseY-bdify[i]; 
	  }
  }
  	  // updating js vars
	  updateJS();
}

void mouseReleased() {
  for (int i=0; i<10; i++) {
  	locked[i] = false;
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
  }
  updateJS();
}

void updateJS() {
  for (int i=0; i<10; i++) {
  	jsx1[i] = bx[i];
	jsy1[i] = by[i];
  }
}

void getFreeIdx() {
	for (int i=0; i<10; i++) {
		if (free1[i] == 1) {
			return i;
		}
	}
}

</script>

<!-- end of the first script-->


<script type="application/processing" data-processing-target="example2">

PImage bigImage;
float[] bx = new float[10];
float[] by = new float[10];
int bs = 4;
boolean[] bover = new boolean[10];
boolean[] locked = new boolean[10];
for (int i=0; i<10; i++){
	bover[i] = false;
	locked[i] = false;	
}
float[] bdifx = new float[10]; 
float[] bdify = new float[10]; 
for (int i=0; i<10; i++){
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
}

void setup() 
{

  bigImage = requestImage(jsImage2);
  size(352, 240);

  for (int i=0; i<10; i++) { 
  	bx[i] = 0.0;
  	by[i] = 0.0;
  }
  ellipseMode(CENTER_RADIUS);  
}

void updateSelf() 
{
	for (int i=0; i<10; i++) {
		bx[i] = jsx2[i];
		by[i] = jsy2[i];
	}
}

void removePoint(int idx) 
{
	bx[idx] = 0.0;
	by[idx] = 0.0;
	//bdifx[idx] = 0.0;
	//bdify[idx] = 0.0;
	free2[idx] = 1;
	jsx2[idx] = 0;
	jsy2[idx] = 0;
	bover[idx] = false;
}

void draw() 
{ 
  //updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  
  // Test if the cursor is over any ellipse
  for (int i=0; i<10; i++) {
	  if (free2[i] == 0) {
		  if (mouseX > bx[i]-bs && mouseX < bx[i]+bs && 
			  mouseY > by[i]-bs && mouseY < by[i]+bs) {
			bover[i] = true;  
			if(!locked[i]) { 
			  stroke(0); 
			  //colorMode(RGB,255);
			  fill(255 - i*20,i*100%255,i*30%255);
			} 
		  } else {
			stroke(255);
			//colorMode(RGB,255);
			fill(255 - i*20,i*100%255,i*30%255);
			bover[i] = false;
		  }
		  
		  // drawing our shapes
		  ellipse(bx[i], by[i], bs, bs);
	  }

  }

}

void mousePressed() {
  boolean new_point = true;
  for (int i=0; i<10; i++) {
	  if(bover[i]) { 
	  	new_point = false;
	  	if (mouseButton == LEFT) {
			locked[i] = true;
			fill(255 - i*20,i*100%255,i*30%255);
		}
		else {
			removePoint(i);
		}
	  } else {
		locked[i] = false;
	  }
	
	  bdifx[i] = mouseX-bx[i]; 
	  bdify[i] = mouseY-by[i];
  }
  if (new_point == true && mouseButton == LEFT) {
  	idx = getFreeIdx();
	bx[idx] = mouseX;
	by[idx] = mouseY;
	free2[idx] = 0;
  }
}



void mouseDragged() {
  for (int i=0; i<10; i++) {
	  if(locked[i]) {
		bx[i] = mouseX-bdifx[i]; 
		by[i] = mouseY-bdify[i]; 
	  }
  }
  	  // updating js vars
	  updateJS();
}

void mouseReleased() {
  for (int i=0; i<10; i++) {
  	locked[i] = false;
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
  }
  updateJS();
}

void updateJS() {
  for (int i=0; i<10; i++) {
  	jsx2[i] = bx[i];
	jsy2[i] = by[i];
  }
}

void getFreeIdx() {
	for (int i=0; i<10; i++) {
		if (free2[i] == 1) {
			return i;
		}
	}
}

</script>

<!-- end of the second script-->


<script type="application/processing" data-processing-target="example3">

PImage bigImage;
float[] bx = new float[10];
float[] by = new float[10];
int bs = 4;
boolean[] bover = new boolean[10];
boolean[] locked = new boolean[10];
for (int i=0; i<10; i++){
	bover[i] = false;
	locked[i] = false;	
}
float[] bdifx = new float[10]; 
float[] bdify = new float[10]; 
for (int i=0; i<10; i++){
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
}

void setup() 
{

  bigImage = requestImage(jsImage3);
  size(352, 240);

  for (int i=0; i<10; i++) { 
  	bx[i] = 0.0;
  	by[i] = 0.0;
  }
  ellipseMode(CENTER_RADIUS);  
}

void updateSelf() 
{
	for (int i=0; i<10; i++) {
		bx[i] = jsx3[i];
		by[i] = jsy3[i];
	}
}

void removePoint(int idx) 
{
	bx[idx] = 0.0;
	by[idx] = 0.0;
	//bdifx[idx] = 0.0;
	//bdify[idx] = 0.0;
	free3[idx] = 1;
	jsx3[idx] = 0;
	jsy3[idx] = 0;
	bover[idx] = false;
}

void draw() 
{ 
  //updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  
  // Test if the cursor is over any ellipse
  for (int i=0; i<10; i++) {
	  if (free3[i] == 0) {
		  if (mouseX > bx[i]-bs && mouseX < bx[i]+bs && 
			  mouseY > by[i]-bs && mouseY < by[i]+bs) {
			bover[i] = true;  
			if(!locked[i]) { 
			  stroke(0); 
			  //colorMode(RGB,255);
			  fill(255 - i*20,i*100%255,i*30%255);
			} 
		  } else {
			stroke(255);
			//colorMode(RGB,255);
			fill(255 - i*20,i*100%255,i*30%255);
			bover[i] = false;
		  }
		  
		  // drawing our shapes
		  ellipse(bx[i], by[i], bs, bs);
	  }

  }

}

void mousePressed() {
  boolean new_point = true;
  for (int i=0; i<10; i++) {
	  if(bover[i]) { 
	  	new_point = false;
	  	if (mouseButton == LEFT) {
			locked[i] = true;
			fill(255 - i*20,i*100%255,i*30%255);
		}
		else {
			removePoint(i);
		}
	  } else {
		locked[i] = false;
	  }
	
	  bdifx[i] = mouseX-bx[i]; 
	  bdify[i] = mouseY-by[i];
  }
  if (new_point == true && mouseButton == LEFT) {
  	idx = getFreeIdx();
	bx[idx] = mouseX;
	by[idx] = mouseY;
	free3[idx] = 0;
  }
}



void mouseDragged() {
  for (int i=0; i<10; i++) {
	  if(locked[i]) {
		bx[i] = mouseX-bdifx[i]; 
		by[i] = mouseY-bdify[i]; 
	  }
  }
  	  // updating js vars
	  updateJS();
}

void mouseReleased() {
  for (int i=0; i<10; i++) {
  	locked[i] = false;
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
  }
  updateJS();
}

void updateJS() {
  for (int i=0; i<10; i++) {
  	jsx3[i] = bx[i];
	jsy3[i] = by[i];
  }
}

void getFreeIdx() {
	for (int i=0; i<10; i++) {
		if (free3[i] == 1) {
			return i;
		}
	}
}

</script>

<!-- end of the third script-->

<script type="application/processing" data-processing-target="example4">

PImage bigImage;
float[] bx = new float[10];
float[] by = new float[10];
int bs = 4;
boolean[] bover = new boolean[10];
boolean[] locked = new boolean[10];
for (int i=0; i<10; i++){
	bover[i] = false;
	locked[i] = false;	
}
float[] bdifx = new float[10]; 
float[] bdify = new float[10]; 
for (int i=0; i<10; i++){
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
}

void setup() 
{

  bigImage = requestImage(jsImage4);
  size(352, 240);

  for (int i=0; i<10; i++) { 
  	bx[i] = 0.0;
  	by[i] = 0.0;
  }
  ellipseMode(CENTER_RADIUS);  
}

void updateSelf() 
{
	for (int i=0; i<10; i++) {
		bx[i] = jsx4[i];
		by[i] = jsy4[i];
	}
}

void removePoint(int idx) 
{
	bx[idx] = 0.0;
	by[idx] = 0.0;
	//bdifx[idx] = 0.0;
	//bdify[idx] = 0.0;
	free4[idx] = 1;
	jsx4[idx] = 0;
	jsy4[idx] = 0;
	bover[idx] = false;
}

void draw() 
{ 
  //updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  
  // Test if the cursor is over any ellipse
  for (int i=0; i<10; i++) {
	  if (free4[i] == 0) {
		  if (mouseX > bx[i]-bs && mouseX < bx[i]+bs && 
			  mouseY > by[i]-bs && mouseY < by[i]+bs) {
			bover[i] = true;  
			if(!locked[i]) { 
			  stroke(0); 
			  //colorMode(RGB,255);
			  fill(255 - i*20,i*100%255,i*30%255);
			} 
		  } else {
			stroke(255);
			//colorMode(RGB,255);
			fill(255 - i*20,i*100%255,i*30%255);
			bover[i] = false;
		  }
		  
		  // drawing our shapes
		  ellipse(bx[i], by[i], bs, bs);
	  }

  }

}

void mousePressed() {
  boolean new_point = true;
  for (int i=0; i<10; i++) {
	  if(bover[i]) { 
	  	new_point = false;
	  	if (mouseButton == LEFT) {
			locked[i] = true;
			fill(255 - i*20,i*100%255,i*30%255);
		}
		else {
			removePoint(i);
		}
	  } else {
		locked[i] = false;
	  }
	
	  bdifx[i] = mouseX-bx[i]; 
	  bdify[i] = mouseY-by[i];
  }
  if (new_point == true && mouseButton == LEFT) {
  	idx = getFreeIdx();
	bx[idx] = mouseX;
	by[idx] = mouseY;
	free4[idx] = 0;
  }
}



void mouseDragged() {
  for (int i=0; i<10; i++) {
	  if(locked[i]) {
		bx[i] = mouseX-bdifx[i]; 
		by[i] = mouseY-bdify[i]; 
	  }
  }
  	  // updating js vars
	  updateJS();
}

void mouseReleased() {
  for (int i=0; i<10; i++) {
  	locked[i] = false;
	bdifx[i] = 0.0;
	bdify[i] = 0.0;
  }
  updateJS();
}

void updateJS() {
  for (int i=0; i<10; i++) {
  	jsx4[i] = bx[i];
	jsy4[i] = by[i];
  }
}

void getFreeIdx() {
	for (int i=0; i<10; i++) {
		if (free4[i] == 1) {
			return i;
		}
	}
}

</script>

<!-- end of the fourth script-->

<script language="JavaScript">
var param_line = decode(gup('url'));
//var param_line = "20100602_220537.jpg 20090731_221340.jpg 20090602_221759.jpg 20101026_222651.jpg";
// we need to parse the input var to image names, and adjust our DOM elements
var params = new Array();
params = param_line.split(" ");

var jsImage1 = "http://amosweb.cse.wustl.edu/image/984/" + params[0];
var jsImage2 = "http://amosweb.cse.wustl.edu/image/984/" + params[1];
var jsImage3 = "http://amosweb.cse.wustl.edu/image/984/" + params[2];
var jsImage4 = "http://amosweb.cse.wustl.edu/image/984/" + params[3];


var jsx1 = new Array();
var jsy1 = new Array();
var jsx2 = new Array();
var jsy2 = new Array();
var jsx3 = new Array();
var jsy3 = new Array();
var jsx4 = new Array();
var jsy4 = new Array();

var free1 = new Array();
var free2 = new Array();
var free3 = new Array();
var free4 = new Array();

for (i=0; i<10; i++) {
	jsx1[i] = 0;
	jsy1[i] = 0;
	free1[i] = 1;
	jsx2[i] = 0;
	jsy2[i] = 0;
	free2[i] = 1;
	jsx3[i] = 0;
	jsy3[i] = 0;
	free3[i] = 1;
	jsx4[i] = 0;
	jsy4[i] = 0;
	free4[i] = 1;
}

function update1(){
	final = "";
	for (i=0; i<10; i++) {
		x = jsx1[i];
		y = jsy1[i];
		if (!(x == 0 && y == 0)) {
			final += " " + x + "," + y;
		}

	}
	document.getElementById("coords1").value = final;
}

function update2(){
	final = "";
	for (i=0; i<10; i++) {
		x = jsx2[i];
		y = jsy2[i];
		if (!(x == 0 && y == 0)) {
			final += " " + x + "," + y;
		}

	}
	document.getElementById("coords2").value = final;
}

function update3(){
	final = "";
	for (i=0; i<10; i++) {
		x = jsx3[i];
		y = jsy3[i];
		if (!(x == 0 && y == 0)) {
			final += " " + x + "," + y;
		}

	}
	document.getElementById("coords3").value = final;
}

function update4(){
	final = "";
	for (i=0; i<10; i++) {
		x = jsx4[i];
		y = jsy4[i];
		if (!(x == 0 && y == 0)) {
			final += " " + x + "," + y;
		}

	}
	document.getElementById("coords4").value = final;
}

function reset(){
	for (i=0; i<10; i++) {
		jsx1[i] = 0;
		jsy1[i] = 0;
		free1[i] = 1;
	}
	update1();
}

//
// This method Gets URL Parameters (GUP)
//
function gup( name )
{
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var tmpURL = window.location.href;
  var results = regex.exec( tmpURL );
  if( results == null )

    return "";
  else
    return results[1];
}

//
// This method decodes the query parameters that were URL-encoded
//
function decode(strToDecode)
{
  var encoded = strToDecode;
  return unescape(encoded.replace(/\+/g,  " "));
}
</script>

<div id="main" style="position:absolute;margin-left:auto;margin-right:auto">

<form id="mturk_form" name="mturk_form" method="POST" action="http://www.mturk.com/mturk/externalSubmit">
<input type="hidden" id="assignmentId" name="assignmentId" value="">
<div style="position:relative;margin-left:auto;margin-right:auto">
<h1>Click on all bicycles in the four images below</h1>
<ul>
<li>Left click to place a dot on a bicycle.</li>
<li>Right click a dot to remove it.</li>
<li>You can also drag already placed dots around to correct errors.</li>
<li>Do <b><u>NOT</u></b> place dots on anything else other than bicycles. </li>
</ul>
</div>
<div style="position:relative;margin-left:auto;margin-right:auto">
<table>
	<tr>
		<td>
<canvas id="example1" onclick="javascript:update1()" onmousemove="javascript:update1()" align="center"> </canvas>
		</td>
		<td>
<canvas id="example2" onclick="javascript:update2()" onmousemove="javascript:update2()" align="center"> </canvas>
		</td>
	</tr>
	<tr>
		<td>
<canvas id="example3" onclick="javascript:update3()" onmousemove="javascript:update3()" align="center"> </canvas>
		</td>
        <td>
<canvas id="example4" onclick="javascript:update4()" onmousemove="javascript:update4()" align="center"> </canvas>
		</td>
    </tr>
 </table>

<!--<button type="button" id="reset" style="visibility:hidden" onClick="javascript:reset()">Reset</button><br />-->
</div>
<input id="submitButton" type="submit" name="HIT Submit" value="Submit HIT">
<div style="clear:right">
<input id="img_name1" type="text" name="img_name1" value="" style="visibility:hidden" />
<input id="img_name2" type="text" name="img_name2" value="" style="visibility:hidden" />
<input id="img_name3" type="text" name="img_name3" value="" style="visibility:hidden" />
<input id="img_name4" type="text" name="img_name4" value="" style="visibility:hidden" />

<input id="coords1" type="text" name="coords1" size="100" value="" style="visibility:hidden" />
<input id="coords2" type="text" name="coords2" size="100" value="" style="visibility:hidden" />
<input id="coords3" type="text" name="coords3" size="100" value="" style="visibility:hidden" />
<input id="coords4" type="text" name="coords4" size="100" value="" style="visibility:hidden" />
</div>

</form>
<script language="Javascript">

	document.getElementById("img_name1").value = params[0];
	document.getElementById("img_name2").value = params[1];
	document.getElementById("img_name3").value = params[2];
	document.getElementById("img_name4").value = params[3];
    document.getElementById('assignmentId').value = gup('assignmentId');


    //
    // Check if the worker is PREVIEWING the HIT or if they've ACCEPTED the HIT
    //
    if (gup('assignmentId') == "ASSIGNMENT_ID_NOT_AVAILABLE")
    {
  // If we're previewing, disable the button and give it a helpful message
  document.getElementById('submitButton').disabled = true;
  document.getElementById('submitButton').value = "You must ACCEPT the HIT before you can submit the results.";
    } else {
        var form = document.getElementById('mturk_form');
        if (document.referrer && ( document.referrer.indexOf('workersandbox') != -1) ) {
            form.action = "http://workersandbox.mturk.com/mturk/externalSubmit";
        }
    }

</script>
</div>
</body>
</html>
